<template>
  <view class="page page-grey page-aftersale-list">
    <view class="page-fixed-top">
      <view class="page-search">
        <fui-search-bar disabled placeholder="搜索订单" searchText="" height="64" paddingTb="0" paddingLr="0" :cancel="false" :isLeft="true" radius="36" searchColor="#FFB703" @blur="searchCenter"></fui-search-bar>
        <fui-button width="100rpx" height="52rpx" radius="72rpx" size="28" @click="searchCenter">搜索</fui-button>
      </view>
      <view class="page-parent-tab">
        <fui-tabs :tabs="parentTabs" @change="handleChangeParentTab" background="transparent" size="28" color="#666" :center="true" selectedSize="32" 
        selectedColor="#376DFE" scale="1" sliderHeight="8" selectedFontWeight="bold" sliderRadius="-1" bottom="16"></fui-tabs>
      </view>
      <view class="page-child-tab">
        <fui-tabs :tabs="childTabs" @change="handleChangeChildTab" background="transparent" size="24" color="#666" :center="true" selectedSize="24" 
        selectedColor="#376DFE" scale="1" sliderHeight="8" :isSlider="false"></fui-tabs>
      </view>
    </view>
    <view class="page-content">
      <list-items :searchForm="searchForm"></list-items>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
import { AFTERSALE_PARENT_STATUS, AFTERSALE_CHILD_STATUS } from './consts'
import listItems from './items'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

// 查询条件
const searchForm = ref({
  status: '11'
})
const searchCenter = () => {
  tab.navigateTo('/pages/aftersale/search')
}

// 一级标签页
const curParentTab = ref(11)
const parentTabs = computed(() => Object.values(AFTERSALE_PARENT_STATUS))
const handleChangeParentTab = (e) => {
  curParentTab.value = e.code
  curChildTab.value = 21
  searchForm.value.name = e.code
}

// 二级标签页
const curChildTab = ref(21)
const childTabs = computed(() => (Object.values(AFTERSALE_CHILD_STATUS)).filter(item => item.parentCode.indexOf(curParentTab.value) > -1))
const handleChangeChildTab = (e) => {
  curChildTab.value = e.code
  searchForm.value.name = e.code
}
</script>

<style lang="scss" scoped>
.page-aftersale-list {
  .page-fixed-top {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 36rpx 36rpx 0;
    .page-search {
      position: relative;
      overflow: hidden;
      border: 3rpx solid var(--fui-color-primary);
      border-radius: 36rpx;
      .fui-search__bar-wrap {
        padding-right: 100rpx !important;
      }
      .fui-button__wrap {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 10;
        transform: translate(-8rpx, -50%);
      }
    }
    .page-parent-tab {
      margin: 10rpx -15rpx;
      ::v-deep .fui-tabs__scrollbox {
        .fui-tabs__item {
          flex-grow: 0;
          padding: 0 15rpx;
        }
      }
    }
    .page-child-tab {
      border-top: 2rpx solid #f8f8f8;
      margin: 0 -10rpx;
      ::v-deep .fui-tabs__scrollbox {
        .fui-tabs__item {
          flex-grow: 0;
          padding: 0 10rpx;
          &.fui-tabs__item-active .fui-tabs__text {
            border: 2rpx solid var(--fui-color-primary);
            border-radius: 32rpx;
            padding: 4rpx 16rpx;
          }
        }
      }
    }
  }
  .page-content {
    padding: 320rpx 36rpx 36rpx;
  }
}
</style>